import {
  createInbizSchema,
  createBaseSchema,
  createValidatorSchema,
  createComponentStyleSchema,
  createModelSchema,
  createDecoratorStyleSchema,
  createComponentLayout,
  createControllerSchema
} from '@inbiz/setters';
import { createBehavior, createResource } from '@inbiz/core';
import { GeoLocation as LocaleGeoLocation } from './locale';

export const defaultProps = {
  turn: true,
  reposition: false,
  range: 1,
};

export const propsSchema = createInbizSchema({
  attribute: {
    ...createBaseSchema(
      {
        api: {
          type: 'string',
          'x-component': 'Input',
          'x-decorator': 'FormItem',
        },
        range: {
          type: 'number',
          'x-component': 'Input',
          'x-decorator': 'FormItem',
        },
        turn: {
          type: 'boolean',
          'x-decorator': 'FormItem',
          'x-component': 'Switch',
        },
        reposition: {
          type: 'boolean',
          'x-decorator': 'FormItem',
          'x-component': 'Switch',
        },
      },
      undefined,
      true,
    ),
    ...createValidatorSchema(),
  },
  style: {
    ...createComponentStyleSchema(),
    ...createComponentLayout(),
    ...createDecoratorStyleSchema(),
  },
  senior: {
    ...createModelSchema(),
  },
  controller: createControllerSchema({
    events: [{
      name: 'onload',
      label: '加载',
      platform: 'web'
    }]
  })
});

export const Behavior = createBehavior({
  name: 'GeoLocation',
  extends: ['Field'],
  selector: (node) => node.props?.['x-component'] === 'GeoLocation',
  designerProps: {
    propsSchema,
  },
  designerLocales: LocaleGeoLocation,
});

export const Resource = createResource({
  icon: 'Geolocation',
  elements: [
    {
      componentName: 'Field',
      props: {
        type: 'string',
        title: {
          value: 'geoLocation.title',
          status: true,
        },
        'x-component': 'GeoLocation',
        'x-decorator': 'FormItem',
        'x-component-props': defaultProps,
      },
    },
  ],
});
